<template>
  <div>
    <a-dropdown>
      <div class="header-avatar" style="cursor: pointer">
        <a-avatar class="avatar" size="small" shape="circle" :src="avatar" />
        <span class="name">{{ user.name }}</span>
      </div>
      <a-menu :class="['avatar-menu']" slot="overlay">
        <!--            <a-menu-item key="user" @click="personalCenter">-->
        <!--              <a-icon type="user" />-->
        <!--              <span>个人中心</span>-->
        <!--            </a-menu-item>-->
        <!--            <a-menu-item key="setting">-->
        <!--              <a-icon type="setting" />-->
        <!--              <span>设置</span>-->
        <!--            </a-menu-item>-->
        <!--            <a-menu-divider />-->
        <a-sub-menu key="Help">
          <span slot="title"><a-icon style="margin-right: 8px;" type="question-circle" /><span>帮助</span></span>
          <a-menu-item key="Manual">
            <a-icon style="margin-right: 8px;" type="book" />
            <span>使用手册</span>
          </a-menu-item>
          <a-menu-item key="Feedback">
            <a-icon style="margin-right: 8px;" type="alert" />
            <span>问题反馈</span>
          </a-menu-item>
          <a-menu-item key="Service">
            <a-icon style="margin-right: 8px;" type="reconciliation" />
            <span>服务协议</span>
          </a-menu-item>
          <a-menu-item key="Privacy">
            <a-icon style="margin-right: 8px;" type="safety-certificate" />
            <span>隐私政策</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="about" @click="showAbout">
          <a-icon style="margin-right: 8px;" type="info-circle" />
          <span>关于</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="exit" @click="logoutHandle">
          <a-icon style="margin-right: 8px;" type="export" />
          <span>{{ $t("exit.btn") }}</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-modal title="关于" :width="500" :visible="aboutModal" @cancel="closeModal" :dialog-style="{ top: '240px' }" :footer="null">
      <div style="height: 230px">
        <div style="position: absolute"><img style="width: 100px" :src="logo"/></div>
        <div style="width: 100%;text-align: center">
          <h1>设备管理系统</h1>
          <h2>MRO 1.0.0</h2>
          <h3>Copyright © 2021-2024 浙江宏利汽配集团有限公司</h3>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import avatar from "@/assets/img/avatar.png";
import logo from "@/assets/img/logo.png";
export default {
  name: "HeaderAvatar",
  i18n: require("./i18n"),
  data() {
    return {
      avatar,
      logo,
      aboutModal: false,
    };
  },
  computed: {
    ...mapGetters("account", ["user"])
  },
  mounted() {},
  methods: {
    ...mapActions("login", ["Logout"]),
    // 退出登录
    logoutHandle() {
      this.$confirm({
        title: this.$t("exit.modalTitle"),
        content: this.$t("exit.modalContent"),
        onOk: () => {
          this.Logout().then(() => {
            this.$router.push("/login");
            sessionStorage.removeItem(process.env.VUE_APP_TBAS_KEY)
          });
        },
        onCancel() {}
      });
    },
    // 打开弹窗展示系统信息
    showAbout(){
      this.aboutModal = true
    },
    // 关闭弹窗展示系统信息
    closeModal(){
      this.aboutModal = false
    },
    // 前往个人中心
    personalCenter() {
      // this.$router.push("/personalCenter");
    }
  }
};
</script>

<style lang="less">
.header-avatar {
  display: inline-flex;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar {
    margin-right: 8px;
  }
  .name {
    font-weight: 500;
  }
}
.avatar-menu {
  width: 120px;
}
</style>
